<template>
    <div class="jd-home" @scroll="pagescroll" ref="scrolltop">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">

        <!-- 通知栏开始 -->
            <van-notice-bar
                color="#fff"
                background="#F30213"
                left-icon="volume-o"
                mode="closeable"
                scrollable
                text="京东618优惠多多"
            />
            <!-- 通知栏结束 -->

            <!-- 搜索框开始 -->
            <van-search
            shape="round"
            disabled
            show-action
            background="#C82519"
            placeholder="请输入搜索关键词"
            @click="onToSearch"
            >
                <template #action>
                    <div @click="$router.replace('/logion')" class="logion">登陆</div>
                </template>
                <template #left>
                    <div @click="onSearch" class="logion">
                        <img src="" alt="">
                    </div>
                </template>
                <!-- 自定义插槽 -->
                <template #label>
                    <div>
                        <span class="jdlogo">
                            <img src="" alt="">
                        </span>
                    </div>
                </template>
            </van-search>
            <!-- 搜索框结束 -->

            <!-- 轮播图开始 -->
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for=" item in imgarr" :key="item.id">
                    <img v-lazy="item.src" id="imgs"/>
                </van-swipe-item>
            </van-swipe>
            <!-- 轮播图结束 -->

            <!-- 另类轮播 -->
            <HomelistLb/>
            <!-- 另类结束 -->

            <div class='list'>
                <!-- van-list这个组件，只是提供了“触底加载”的功能 -->
                <!-- immediate-check，关闭初始化的"触底加载"检测 -->
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    :offset='100'
                    :immediate-check='false'

                >
                <div class="listArr" v-for="i in rowLen" :key="i">
                    <Goodlist :good='list[2*i-2]'/>
                    <Goodlist :good='list[2*i-1]'/>


                </div>
                </van-list>
                    
                </div>
        </van-pull-refresh>   
        <Tabbar/>  

    </div>
</template>
<script>
import { Search,NoticeBar,Swipe,SwipeItem,Lazyload,List,PullRefresh, Cell} from 'vant';
import Vue from 'vue'

Vue.use(Lazyload)
import HomelistLb from './components/HomelistLb.vue'
import Goodlist from './components/Goodlist.vue'
import { Tabbar, } from '../../components/index';
import {fetchGoodList} from '@/utils/api'


export default {
    components:{
		[Search.name]: Search,
        [NoticeBar.name]:NoticeBar,
        [Swipe.name]:Swipe,
        [SwipeItem.name]:SwipeItem,
        [List.name]:List,
        [PullRefresh.name]:PullRefresh,
        [Cell.name]:Cell,
        HomelistLb,
        Goodlist,
        Tabbar

    },
    data(){
        return{
            imgarr:[
                {id:1,src:'//m.360buyimg.com/mobilecms/s700x280_jfs/t1/167727/16/12273/102253/6053aa7aE63df02b7/3d69eb7befd57ff0.jpg!cr_1125x449_0_166!q70.jpg.dpg'},
                {id:2,src:'//m.360buyimg.com/mobilecms/s700x280_jfs/t1/173478/18/14449/54385/60c452bfE3ed52b72/7c88d0980a334f91.jpg!cr_1053x420_4_0!q70.jpg.dpg'},
                {id:3,src:'//imgcps.jd.com/ling4/10027263165821/5omL5py66YWN5Lu25pyJ5L-d6K-B/54iG5ZOB54m55oOg/p-5c11d16482acdd181dbc1fad-618/c020e815/cr_1125x449_0_166/s1125x690/q70.jpg'}
            ],
            list: [],
            loading: false,
            finished: false,
            refreshing: false,  
            size:6,
            page:1,
            top:0    
        }
    },
    created(){
        //页面一进入就请求数据
        this.info()
    },
    watch:{
        page(){
            this.info()
        }

    },
    computed:{
        rowLen(){
            return Math.floor(this.list.length/2)
        }
    },

    methods: {
        info(){
            fetchGoodList({size:6,page:this.page}).then(res=>{
            if(this.page===1){
                this.list = res.list
                this.finished = false
                this.refreshing = false
            }else{
                this.list = this.list.concat(res.list)
                this.loading = false
                
                if(this.list.length === res.total){
                    this.finished = true
                }
            }
        })
        },

          //搜索功能
        onToSearch(){
            console.log("搜索页面");
        },
        // 登陆功能
        onSearch(){
            location.href="Logion.vue"
            console.log("登陆");
        },
       //触底加载功能
        onLoad() {
        this.page++

        },
		// 下拉刷新功能
        onRefresh() {
            // page恢复初始值
        this.page = 1
        },
        pagescroll(e){
            // 通过scrollTop获取到页面滚动的距离赋值给top
            this.top = e.srcElement.scrollTop
        }
    },
    activated(){
        // 在组件进去入前台时把滚动的距离top赋值给这个组件让他滚动到top值的位置
        this.$refs.scrolltop.scrollTop=this.top
    }
    

}
    
    

</script>
<style lang="scss" scoped>
.jd-home{
    padding-bottom: 50px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0.133rem;
    overflow: auto;
}
.logion{
    color: #fff;
    img{
    display: block;
    width: 0.533rem;
    height: 0.427rem;
    padding-right: 0.267rem;
    }
}
.jdlogo{
    img{
    width: 0.533rem;
    height: 0.4rem;
    padding: 0.27rem 0 0 0.1rem;
    }
}
.van-swipe {
  height: 3.73rem;
  width: 100%;

	margin: 0.2rem auto;
	border-radius: 0.1rem;
    text-align: center;
	.van-swipe-item {
		width: 100%;
		height: 100%;
		img {
        display: block;
        width: 9.333rem;
        height: 3.733rem;
        margin:  0 auto;
        border-radius: 0.067rem;

		}
	}
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
.listArr{
    width:100%;
	display: flex;
	font-size: .346667rem;
	color: #1a1a1a;
	background: rgba(247, 247, 247, 1);
    

}







</style>